$(function () {
  var form = layui.form;
  var art_state = "发布";
  initEditor(); // 初始化富文本编辑器
  initArtCate();
  // 1. 初始化图片裁剪器
  var $image = $("#image");

  // 2. 裁剪选项
  var options = {
    aspectRatio: 400 / 280,
    preview: ".img-preview",
  };

  // 3. 初始化裁剪区域
  $image.cropper(options);
  function initArtCate() {}
  $.ajax({
    method: "get",
    url: "/my/article/cates",
    success: function (res) {
      if (res.status !== 0) {
        return layer.msg(res.message);
      }
      layer.msg("获取文章数据成功");
      var htmlStr = template("tplPub", res);
      $("[name = cate_id]").html(htmlStr);
      form.render();
    },
  });
  // 选择封面
  $(".layui-btn-danger").on("click", function () {
    $("#file").click();
  });
  //监听用户
  $("#file").on("change", function (e) {
    console.log(e);
    var fileList = e.target.files;
    var imgURL = URL.createObjectURL(fileList[0]);
    $image
      .cropper("destroy") // 销毁旧的裁剪区域
      .attr("src", imgURL) // 重新设置图片路径
      .cropper(options); // 重新初始化裁剪区域
  });
  //发表文章
  $("#form_pub").on("submit", function (e) {
    e.preventDefault();
    var fd = new FormData($(this)[0]);
    console.log(fd);
    fd.append("state", art_state);

    //4 将封面裁剪过后的照片输出为一个文件对象
    $image
      .cropper("getCroppedCanvas", {
        // 创建一个 Canvas 画布
        width: 400,
        height: 280,
      })
      .toBlob(function (blob) {
        console.log(blob);
        // 将 Canvas 画布上的内容，转化为文件对象
        // 得到文件对象后，进行后续的操作
        fd.append("cover_img", blob);
        fd.forEach(function (k, value) {
          console.log(k, value);
        });
        pubArticle(fd);
      });
  });
  // 发送发布文章请求
  function pubArticle(fd) {
    $.ajax({
      method: "post",
      url: "/my/article/add",
      data: fd,
      contentType: false,
      processData: false,
      success: function (res) {
        if (res.status !== 0) {
          return layer.msg(res.message);
        }
        layer.msg("发布成功");
      },
    });
  }
  //存为草稿
  $("#saveForm").on("click", function () {
    art_state = "草稿";
  });
});
